<template>
	<view class="container">
		<!-- 状态栏 -->
		<view class="top-container">
			<view class="top">
				<!-- 状态栏左侧 -->
				<view class="top-left">
					<text class="active-tab">{{statusText}}</text>
					<text>{{listData.length}}条</text>
				</view>
				<!-- 状态栏右侧 -->
				<view class="top-right">
					<text :class="{'active-tab':activeIndex === 0}" @click="tab(0)">全部</text>
					<text :class="{'active-tab':activeIndex === 1}" @click="tab(1)">待办</text>
					<text :class="{'active-tab':activeIndex === 2}" @click="tab(2)">已完成</text>
				</view>
			</view>
		</view>
		<!-- 没有数据的状态 -->
		<view class="defalut" v-if="list.length === 0">
			<view class="img">
				<!-- <image src="../../static/default.png" mode="aspectFit"></image> -->
				<view class="apption">
					您还没有创建任何待办事件
				</view>
				<view class="apption">
					点击下方+按钮创建一个吧
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="content" v-if="list.length !== 0">
			<view class="content-list" :class="(item.status===1)?'todo-finish':''" @click="finish(item.id)" v-for="(item,index) in listData"
			 :key="index">
				<view class="content-list-check">
					<view class="check-box">
					</view>
				</view>
				<view class="content-list-text">
					{{getContent(item)}}
					<!-- {{item.content}}-{{utils.timeTodate('Y-m-d H:i:s', item.createTime)}}-{{utils.timeTodate('Y-m-d H:i:s', item.finishTime)}} -->
				</view>
			</view>
		</view>
		<!-- 发布按钮 -->
		<view class="create-todo" @click="infoText">
			<text class="iconfont icon-add" :class="{'creat-todo-active':textShow}"></text>
		</view>
		<!-- 输入框 -->
		<view class="create-content" :class="{'creat-show':textShow}" v-if="isShow">
			<view class="create-content-box">
				<view class="create-input">
					<input type="text" v-model="info" placeholder="请输入内容" />
				</view>
				<view class="create-button" @click="add">
					创建
				</view>
			</view>
		</view>

	</view>
</template>
<script>
	import utils from '@/components/shoyu-date/utils.filter.js';
	//TODO: 添加数据库相关数据
	export default {
		data() {
			return {
				utils: utils,
				list: [],
				info: '',
				isShow: false,
				activeIndex: 0,
				statusText: '全部',
				textShow: false,
				dataForm: {
					key: ''
				},
				pageIndex: 1,
				pageSize: 10,
				totalPage: 0,
			}
		},
		onLoad() {

		},
		mounted() {
			this.getDataList()
		},
		computed: {
			listData() {
				// 数据拷贝
				let list = JSON.parse(JSON.stringify(this.list)); //把list先转换成字符串再转换成对象
				let newList = [];
				// 点击全部
				if (this.activeIndex === 0) {
					// console.log(this.list);
					this.statusText = '全部';
					return list;
				}
				// 待办
				if (this.activeIndex === 1) {
					list.forEach((item) => {
						if (item.status === 0) {
							this.statusText = '待办';
							newList.push(item);
						}
					});
					return newList;
				}
				// 已完成
				if (this.activeIndex === 2) {
					list.forEach((item) => {
						if (item.status === 1) {
							this.statusText = '已完成';
							newList.push(item);
						}
					});
					return newList;
				}
			}
		},
		methods: {
			getContent(item) {
				var endTime = '';
				if (item.finishTime !== null) {
					endTime = "-" + utils.timeTodate('Y-m-d H:i:s', item.finishTime);
				}
				return item.content + "-" + utils.timeTodate('Y-m-d H:i:s', item.createTime) + endTime;
			},
			getDataList() {
				uni.request({
					url: 'http://192.168.0.104:8989/api/test_todolist/item/list',
					method: 'get',
					data: {
						'page': this.pageIndex,
						'limit': this.pageSize,
						'key': this.dataForm.key
					},
					success: ({
						data
					}) => {
						if (data && data.code === 0) {
							this.list = data.page.list
							this.totalPage = data.page.totalCount
						} else {
							this.list = []
							this.totalPage = 0
						}
					}
				})
			},
			add() {
				if (this.info === '') { //加一个空值判断
					uni.showToast({
						title: '请输入内容',
						icon: 'none',
					})
					return
				}
				// this.list.unshift({
				// 	content: this.info,
				// 	id: "id" + new Date().getTime(),
				// 	status: 0,
				// });
				uni.request({
					url: 'http://192.168.0.104:8989/api/test_todolist/item/save',
					method: 'post',
					data: {
						content: this.info,
						status: 0,
					},
					success: ({
						data
					}) => {
						if (data && data.code === 0) {
							this.getDataList()
						}
					},
					complete: () => {
						this.info = '';
						this.textShow = false
						this.$nextTick(function() {
							setTimeout(() => {
								this.isShow = false;
							}, 350)
						});
					}
				})
			},
			finish(index) {
				console.log(index);
				const i = this.list.findIndex((item) => item.id === index);
				this.list[i].status = this.list[i].status === 1 ? 0 : 1;
				// this.list[i].finishTime = this.list[i].status === 1 ? new Date().getTime() : null
				uni.request({
					url: 'http://192.168.0.104:8989/api/test_todolist/item/update',
					method: 'post',
					data: this.list[i],
					success: ({
						data
					}) => {
						if (data && data.code === 0) {
							this.getDataList()
						}
					},
			})
			},
			tab(index) {
				this.activeIndex = index
			},
			infoText() {
				const d1 = new Date().getTime();
				// 关闭动画
				if (this.isShow) {
					this.textShow = false
					this.$nextTick(function() {
						setTimeout(() => {
							this.isShow = false
							console.log("true:" + (new Date().getTime() - d1));
						}, 350)
					})
				} else {
					// 开启动画
					this.isShow = true
					this.$nextTick(function() {
						setTimeout(() => {
							this.textShow = true
							console.log("true:" + (new Date().getTime() - d1));
						}, 50)
					})
				}
			},
		},

	}
</script>


<style>
	@import 'index.css';
	@import '../../common/icon.css';
</style>
